<template>
  <div class="map">
    <div class="map" ref="map_ref" @dblclick="resetMap"></div>
    <div class="text">
      <h1>当前健康度</h1>
      <span>{{ healthScore }}</span>
    </div>
  </div>
</template>

<script>
import {
  getMapCivilCodeJson,
  getNowHealth,
  getCityCivilCode,
} from "@/api/apis";
// import { getAreaPinYinByHanzi } from "@/utils/map_util";
// import { mapState } from "vuex";
export default {
  components: {},
  data() {
    return {
      mapChart: null, // 地图实例
      allData: null, // 服务端数据
      mapJson: null, // 获取到的地图矢量数据
      healthScore: 0, // 健康度得分
      mapPath: "", // 地图矢量数据路径
      nextMapPath: "", // 下一级地图矢量数据
      firstClick: true,
      isFrstOn:true
    };
  },
  created() {
    // this.$cookies.set("vims_civilCode", "340103");
    // this.$cookies.set("vims_civilCode", "420000");
  },
  mounted() {

  },
  computed: {},
  methods: {
    initMoudle() {
      this.initChart();
      this.getData();
      this.getHealthValue();
    },
    async initChart() {
      // const mapPath = this.getmapPath();
      // const res = await this.$axios.get(mapPath);
      console.log(this.$store.state.civilCode, "jjjjjjjjjjjjjjjjjjjjjj");
      const ret = require(`../../public/map/${this.$store.state.civilCode}.json`);
      this.$echarts.registerMap(this.civilCode, ret);
      this.mapChart = this.$echarts.init(this.$refs.map_ref);
      if(this.isFrstOn){
        this.mapChart.on("click", async (arg) => {
        if (!this.firstClick) return;
        this.firstClick = false;
        let params = {
          name:arg.name
        };
        getCityCivilCode(params).then((res) => {
          if (res.code == 200 && res.data[0].code) {
            let code = res.data[0].code;
            console.log(code, "ggggggggggggggg");
            this.$store.commit("setCivilCode", code);
            this.$emit("changCity");
          } else {
            this.$msg({
              message: `${arg.name}暂无数据，请重试！！！`,
              type: "warning",
            });
          }
        });
        // const mapData = getAreaPinYinByHanzi(arg.name); // 点击区域对应的code
      });
      }
      this.firstOn = false;
      var option = {
        toolbox: {
          show: true,
          top: "5%",
          // orient: "垂直", // 居然好使
          orient: "vertical",
          feature: {
            dataView: {
              show: true,
              readOnly: false,
            },
            restore: {
              show: true,
            },
            saveAsImage: {
              show: true,
            },
          },
        },
        // 悬浮提示
        tooltip: {
          show: true,
          formatter: function (params) {
            return "&nbsp;" + params.name + ":&nbsp;" + params.value + "&nbsp;";
          },
        },
        // 图例
        visualMap: {
          type: "piecewise",
          left: "1%",
          bottom: "1%",
          itemWidth: 20,
          itemHeight: 10,
          textStyle: {
            color: "#333333",
            fontSize: 8,
          },
          pieces: [
            {
              min: 80,
              label: "80-100",
            },
            {
              max: 80,
              min: 60,
              label: "60-80",
            },
            {
              max: 60,
              min: 30,
              label: "30-60",
            },
            {
              min: 0,
              max: 30,
              label: "0-30",
            },
          ],
          inRange: {
            color: ["#e0022b", "#a54a28", "#6b9224", "#30da21"],
          },
          outOfRange: {
            color: ["#eeeeee"],
          },
        },
        series: [
          {
            type: "map",
            map: this.civilCode,
            show: true,
            zoom: 0.9,
            // roam: true, // 不能移动，移动之后点击回导致地图乱跑
            top: "5%",
            bottom: "5%",
            label: {
              normal: {
                show: true,
                formatter: "{b}:{c}",
                fontSize: 8,
              },
              emphasis: {
                show: false,
              },
              fontSize: 8,
            },
          },
        ],
      };
      this.mapChart.setOption(option);
      // 地图点击事件
    },
    async getData() {
      let params = {
        code:this.$store.state.civilCode
      };
      await getMapCivilCodeJson(params).then((res) => {
        this.allData = res.data;
        this.allData.forEach((item) => {
          item.value = item.health;
        });
        this.updateChart();
      });
    },
    async getHealthValue() {
      let params = {
        code:this.$store.state.civilCode
      };
      getNowHealth(params).then((res) => {
        this.healthScore = res.data.healthScore;
      });
    },
    updateChart() {
      var option = {
        series: [{ data: this.allData }],
      };
      this.mapChart.setOption(option);
    },
    screenAdapter() {},
    resetMap() {
      if (this.civilCode === this.$cookies.get("vims_civilCode")) return;
      this.firstClick = true;
      this.$store.commit("setCivilCode", this.$cookies.get("vims_civilCode"));
      this.$emit("changCity");
    },
  },
};
</script>

<style scoped>
.map {
  position: relative;
  width: 100%;
  height: 100%;
}
.text {
  position: absolute;
  z-index: 10;
  top: 0;
  left: calc(50% - 40px);
}
.text h1 {
  font-weight: 700;
  font-size: 16px;
  margin: 5px;
  color: #9a9a9a;
}
.text span {
  margin-left: 25px;
  font-weight: 700;
  font-size: 28px;
  font-family: TypoPRO;
  color: #0c74f6;
}
</style>